<template>
    <div style="line-height: 60px; display: flex;">
        <div style="flex: 1;">
            <span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px" @click="collapse"></span>
            <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
                <el-breadcrumb-item :to="'/home'">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{currentPathName}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="text-align: right;margin-right: 20px;margin-top: 5px">
            <el-dropdown>
            <span class="el-dropdown-link">
            <img class="user_img" src="@/assets/QQ图片20230623092752.jpg"/>
            </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>注销</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    name: "Header",
    props: {
        collapseBtnClass: String,    //按钮图标切换
        collapse: {},  //控制侧边收缩  父传子函数，子组件用{}接收，也就是函数类型
    },
    data(){
        return {

        }
    },
    computed: { //计算属性
        currentPathName(){
            return this.$store.state.currentPathName; //需要监听的数据
        }
    },
}
</script>

<style scoped>
.user_img{
    width:40px;
    height: 40px;
    border-radius: 50%;
}
</style>